<template>
	<view class="bill">
		<div class="billBox" id="billbox" ref="billbox">
			<canvas ref="canvas" canvas-id="canvas" id="canvas" :style="{width:cWidth+'px',height:cHeight+'px'}"></canvas>
			<canvas ref="qrcode" canvas-id="qrcode" id="qrcode" :style="{width:200+'px',height:200+'px'}"></canvas>

		</div>

		<div class="btnbox">
			<div class="btn" @click="downloadBill">
				<view class="iconBox">
					<image src="@/static/svg/bill.svg" class="icon"></image>
				</view>
				<text>海报下载</text>
			</div>
			<div class="btn" @click="downloadQrcode">
				<view class="iconBox">
					<image src="@/static/svg/qrcode.svg" class="icon"></image>
				</view>
				<text>二维码下载</text>
			</div>
		</div>
	</view>
</template>

<script>
	import UQRCode from '@/static/js/uqrcode.js'
	export default {
		data() {
			return {
				cWidth: 312,
				cHeight: 520,
				qrcodeUrl: null
			};
		},
		methods: {
			getQrcode() {
				let ctx = uni.createCanvasContext("qrcode", this)
				try {
					let qr = new UQRCode()
					qr.size = 200
					qr.data = 'https://baidu.com'
					qr.make()
					qr.canvasContext = ctx
					qr.drawCanvas()
				} catch {
					console.log(123)
				}
				let that = this
				uni.canvasToTempFilePath({
					canvasId: 'qrcode',
					success: function(res) {
						that.qrcodeUrl = res.tempFilePath
					}
				})
			},
			downloadQrcode() {
				uni.saveImageToPhotosAlbum({
					filePath: this.qrcodeUrl,
					success() {
						uni.showToast({
							title: '下载成功',
							icon: 'success'
						})
					}
				})
			},
			downloadBill() {
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: this.cWidth,
					height: this.cHeight,
					canvasId: 'canvas',
					success: function(res) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success() {
								uni.showToast({
									title: '下载成功',
									icon: 'success'
								})
							}
						})
					}
				})
			},
			createBillFn() {
				this.getQrcode()
				const query = wx.createSelectorQuery()
				new Promise((resolve, reject) => {
					query.select('#billbox').boundingClientRect((result) => {
						this.cHeight = result.height
						this.cWidth = result.width
						resolve()
					}).exec()
				}).then(_ => {
					let ctx = uni.createCanvasContext("canvas", this)
					let w = this.cWidth / 312
					let h = this.cHeight / 520
					ctx.fillStyle = '#fff'
					ctx.fillRect(0, 0, 312 * w, 520 * h);
					ctx.font = "33px sans-serif"
					ctx.fillStyle = '#000'
					ctx.fillText("微信扫码连", 40 * w, 40 * h)
					ctx.fillStyle = '#00acac'
					ctx.font = "35px sans-serif"
					ctx.fillText("WIFI", 220 * w, 42 * h)
					ctx.fillStyle = '#000'
					ctx.font = "15px sans-serif"
					ctx.fillText('自动连接WIFI·无需密码·快捷安全', 45 * w, 65 * h)
					ctx.drawImage(this.qrcodeUrl, 35 * w, 100 * h, 240 * w, 240 * h)
					ctx.fillStyle = '#00acac'
					ctx.fillRect(0, 380 * h, 314 * w, 140 * h);
					ctx.drawImage(require('../../../../static/img/wifi.png'), 5 * w, 375 * h, 150 * w, 150 * h)
					ctx.fillStyle = '#fff'
					ctx.font = "bold 18px sans-serif"
					ctx.fillText('免费共享', 160 * w, 420 * h)
					ctx.beginPath()
					ctx.moveTo(255 * w, 415 * h)
					ctx.lineTo(285 * w, 415 * h)
					ctx.lineCap = 'round'
					ctx.lineWidth = 25
					ctx.strokeStyle = '#fff'
					ctx.stroke()
					ctx.font = "bold 15px sans-serif"
					ctx.fillStyle = '#00acac'
					ctx.fillText('WIFI', 255 * w, 420 * h)
					ctx.fillStyle = '#fff'
					ctx.font = "12px sans-serif"
					ctx.fillText('Share wifi for free', 160 * w, 445 * h)
					ctx.beginPath()
					ctx.moveTo(160 * w, 460 * h)
					ctx.lineTo(295 * w, 460 * h)
					ctx.lineCap = 'round'
					ctx.lineWidth = 1
					ctx.strokeStyle = '#fff'
					ctx.stroke()
					ctx.font = "18px sans-serif"
					ctx.fillText('安全·放心·安心', 160 * w, 490 * h)
					ctx.draw()
				})
			}
		},
		onReady() {
			this.createBillFn()
		}
	}
</script>

<style lang="scss">
	@import '../../../../static/style/mixin.scss';

	.bill {
		width: 750upx;
		height: 100vh;
		background-color: #00000030;
		overflow: hidden;
		position: fixed;


		.billBox {
			box-shadow: 0 0 5px #000;
			width: 600upx;
			height: 70vh;
			margin: 50upx auto;

			#qrcode {
				opacity: 0;
			}
		}

		.btnbox {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750upx;
			height: 300upx;
			display: flex;
			background-color: #fff;

			.btn {
				width: 50%;
				height: inherit;
				@include vcc;

				.iconBox {
					border-radius: 50%;
					height: 100upx;
					width: 100upx;
					@include cc;
					background-color: aqua;

					.icon {
						height: 50upx;
						width: 50upx;
					}
				}
			}
		}
	}
</style>
